<template>
	<view class="container">
		<!-- <custom-header title="账号设置" :show-back="true" show-bg-color></custom-header> -->
		<view class="layout">
			<uni-list>
				<uni-list-item show-arrow>
					<template v-slot:header>
						<view class="content-title-layout">
							<text class="text">头像</text>
						</view>
					</template>
					<template v-slot:footer>
						<button open-type="chooseAvatar" style="width: 300rpx;text-align: right" class="share-btn" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="userInfo.avatar" mode="widthFix" v-if="userInfo.avatar"></image>
							<image class="avatar" src="/images/default_avatar.png" mode="widthFix" v-else></image>
						</button>
					</template>
				</uni-list-item>
				<uni-list-item title="昵称" :rightText="userInfo.nickname" show-arrow>
					<template v-slot:footer>
						<input type="nickname" v-model="userInfo.nickname" placeholder="请输入用户昵称" @change="onChangeNickName" class="input-text-box" />
					</template>
				</uni-list-item>
				<uni-list-item title="ID" :right-text="userInfo.phone"></uni-list-item>
				<!-- <uni-list-item title="邀请码" :right-text="userInfo.invitationCode"></uni-list-item> -->
				<uni-list-item title="加入日期" :right-text="userInfo.joinDate"></uni-list-item>
				<uni-list-item title="退出登录" clickable @click="onLogoutClick"></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script setup>
	import { ref, watch } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { updateUserAvatarAndName } from '@/utils/api.js';
	
	const userInfo = ref({});
	
	
	const onLogoutClick = () => {
		uni.showModal({
			content: '确定退出吗？',
			success(res) {
				if (res.confirm) {
					uni.removeStorageSync('userInfo');
					uni.removeStorageSync('accessToken');
					uni.navigateBack();
				}
			}
		})
	}
	const onChooseAvatar = async (res) => {
		const { avatarUrl } = res.detail;
		userInfo.value.avatar = avatarUrl;
		const { success, data } = await updateUserAvatarAndName({
			id: userInfo.value.id,
			avatar: avatarUrl
		}); 
		if (success) {
			uni.setStorageSync('userInfo', JSON.stringify(userInfo.value))
		}
	}
	
	const onChangeNickName = async (res) => {
		console.log(res);
		userInfo.value.nickname = res.detail.value;
		const { success, data } = await updateUserAvatarAndName({
			id: userInfo.value.id,
			nickname: res.detail.value
		}); 
		if (success) {
			uni.setStorageSync('userInfo', JSON.stringify(userInfo.value))
		}
	}
	onLoad(() => {
		userInfo.value = JSON.parse(uni.getStorageSync('userInfo'));;
	})
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		.layout {
			flex: 1;
			background-color: #F3F8FF;
			padding: 24rpx;
			.avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.content-title-layout {
				display: flex;
				align-items: center;
				.text {
					font-size: 14px;
					color: #3b4144;
					overflow: hidden;
				}
			}
			.input-text-box {
				text-align: right;
				color: #999;
				font-size: 12px;
			}
		}
	}
</style>
